<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <link rel="stylesheet" href="./css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="./css/app.css"/>
    <link rel="stylesheet" type="text/css" 
    	href="css/swiper.min.css"/>
    <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">
    <script type="text/javascript">
   		document.addEventListener('plusready', function(){
   			//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
   		});
    </script>
    <script src="./js/mui.min.js"></script>
    <style type="text/css">
    	html,body{
    		width: 100%;
    		height: 100%;
    	}
    	.title{
				padding: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
				border-bottom: 1px solid black;
			}
			
			.oa-contact-cell.mui-table .mui-table-cell {
				padding: 11px 0;
				vertical-align: middle;
			}
			
			.oa-contact-cell {
				position: relative;
				margin: -11px 0;
			}
	
			.oa-contact-avatar {
				width: 75px;
			}
			.oa-contact-avatar img {
				border-radius: 50%;
			}
			.oa-contact-content {
				width: 100%;
			}
			.oa-contact-name {
				margin-right: 20px;
			}
			.oa-contact-name, oa-contact-position {
				float: left;
			}
			.mui-ellipsis{
				padding-top: 10px;
			}
			.swiper-wrapper{
				width: 100%;
	            height: 100%;
			}
		    .swiper-container {
		    	display: block;
	            margin: 0;
	            width: 100%;
	            height: 100%;
	        }
	        #both{
	        	display: none;
	        }
		    .swiper-slide {
		    	
		        text-align: center;
		        font-size: 18px;
		        background: #fff;
		        
		        /* Center slide text vertically */
		        display: -webkit-box;
		        display: -ms-flexbox;
		        display: -webkit-flex;
		        display: flex;
		        -webkit-box-pack: center;
		        -ms-flex-pack: center;
		        -webkit-justify-content: center;
		        justify-content: center;
		        -webkit-box-align: center;
		        -ms-flex-align: center;
		        -webkit-align-items: center;
		        align-items: center;
		    }
		    .mui-card{
		    	width:100%;
		    	margin: 0;
		    }
		    .mui-table-view-chevron .mui-table-view-cell{
		    	padding-right: 10px;
		    }
    </style>
</head>
<body>
	<div class="swiper-container" id="swipercontain">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="width: 100%;height: 100%;">
            	
                </div>
            <div class="swiper-slide" style="width: 100%;height: 100%;">Slide 2</div>
            <div class="swiper-slide" style="width: 100%;height: 100%;">
            	<button id="btn">进入</button>
            </div>
        </div>
    </div>
    
    <div id="both">
		<header class="mui-bar mui-bar-nav" style="background: url(img/4.jpg) no-repeat;">
			<h1 class="mui-title">Resume</h1>
		</header>
		
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#tabbar">
				<span class="mui-icon mui-icon-person"></span>
				<span class="mui-tab-label">我</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-chat">
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">消息</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-contact">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">通讯录</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-map">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</a>
		</nav>
		
	
			<div class="mui-content" style="background: url(img/7.jpg) ;">
				<div id="tabbar" class="mui-control-content mui-active">
				<!--静态图片-->
				<img id="img1" src="./img/2.jpg" style="width: 375px;height: 375px;"/>
				<!--轮播图片-->
				<div id="slider" class="mui-slider mui-hidden" >
				  <div class="mui-slider-group">-->
				    <!-- 第一张 -->
				     <div class="mui-slider-item">
				      <a href="#">
				        <img src="./img/3.jpg" style="width: 375px;height: 375px;">
				      </a>
				    </div>
				    <!-- 第二张 -->
				    <div class="mui-slider-item">
				      <a href="#">
				        <img src="./img/2.jpg" style="width: 375px;height: 375px;">
				      </a>
				    </div>
				  </div>
				  <div class="mui-slider-indicator">
				    <div class="mui-indicator mui-active"></div>
				    <div class="mui-indicator"></div>
				  </div>
				</div>
				<p style="margin: 30px 15px 60px 15px;">
					姓名：周博政
				</p>
				<p style="margin: 5px 15px 60px 15px;">
					联系电话：15805643963
				</p>
				<p style="margin: 5px 15px 60px 15px;">
					邮箱：1131653047@qq.com
				</p>
				<p style="margin: 5px 15px 60px 15px;">
					毕业院校：淮南师范学院
				</p>
				<p style="margin: 5px 15px 60px 15px;">
					专业：电子信息科学与技术
				</p>
				<p style="margin: 5px 15px 60px 15px;">
					爱好：旅游、台球、篮球、登山
				</p>
				<form class="mui-input-group" >
					<div class="mui-input-row mui-radio" style="opacity: 0.4;">
						<label >静态图片</label>
						<input name="style" type="radio" checked value="static">
					</div>
					<div class="mui-input-row mui-radio" style="opacity: 0.4;">
						<label>轮播图</label>
						<input name="style" type="radio" value="slider">
					</div>
				</form>
			</div>
			
				<div id="tabbar-with-chat" class="mui-control-content">
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell">
							<div class="mui-card">
								<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(./img/8.jpg)"></div>
								<div class="mui-card-content">
									<div class="mui-card-content-inner">
										<p>node js</p>
										<p style="color: #333;">熟悉node js的试用，有一年多的经验</p>
									</div>
								</div>
							</div>
						</li>
						<li class="mui-table-view-cell" >
							<div class="mui-card" >
								<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(./img/8.jpg)"></div>
								<div class="mui-card-content">
									<div class="mui-card-content-inner">
										<p>node js</p>
										<p style="color: #333;">熟悉node js的试用，有一年多的经验</p>
									</div>
								</div>
							</div>
						</li>
						<li class="mui-table-view-cell">
							<div class="mui-card">
								<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(./img/8.jpg)"></div>
								<div class="mui-card-content">
									<div class="mui-card-content-inner">
										<p>node js</p>
										<p style="color: #333;">熟悉node js的试用，有一年多的经验</p>
									</div>
								</div>
							</div>
						</li>
						<li class="mui-table-view-cell">
							<div class="mui-card">
								<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(./img/8.jpg)"></div>
								<div class="mui-card-content">
									<div class="mui-card-content-inner">
										<p>node js</p>
										<p style="color: #333;">熟悉node js的试用，有一年多的经验</p>
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
				
				<div id="tabbar-with-contact" class="mui-control-content">
				<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
					<li class="mui-table-view-cell">
						<div class="mui-card">
							<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(./img/8.jpg)"></div>
							<div class="mui-card-content">
								<div class="mui-card-content-inner">
									<p>node js</p>
									<p style="color: #333;">熟悉node js的试用，有一年多的经验</p>
								</div>
							</div>
						</div>
					</li>
					<li class="mui-table-view-cell">
						<div class="mui-card">
							<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(./img/8.jpg)"></div>
							<div class="mui-card-content">
								<div class="mui-card-content-inner">
									<p>node js</p>
									<p style="color: #333;">熟悉node js的试用，有一年多的经验</p>
								</div>
							</div>
						</div>
					</li>
				<li class="mui-table-view-cell">
					<div class="mui-card">
								<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(./img/8.jpg)"></div>
								<div class="mui-card-content">
									<div class="mui-card-content-inner">
										<p>node js</p>
										<p style="color: #333;">熟悉node js的试用，有一年多的经验</p>
									</div>
								</div>
							</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-card">
								<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(./img/8.jpg)"></div>
								<div class="mui-card-content">
									<div class="mui-card-content-inner">
										<p>node js</p>
										<p style="color: #333;">熟悉node js的试用，有一年多的经验</p>
									</div>
								</div>
							</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-card">
								<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(./img/8.jpg)"></div>
								<div class="mui-card-content">
									<div class="mui-card-content-inner">
										<p>node js</p>
										<p style="color: #333;">熟悉node js的试用，有一年多的经验</p>
									</div>
								</div>
							</div>
				</li>
			</ul>
			</div>
				
				
				<div id="tabbar-with-map" class="mui-control-content">
				<div class="title">这是div模式选项卡中的第4个子页面，该页面展示一个常见的设置示例.</div>
				<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						新消息通知
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						隐私
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						通用
					</a>
				</li>
			</ul>
			<ul class="mui-table-view" style="margin-top: 25px;">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						关于mui
					</a>
				</li>
			</ul>
			<ul class="mui-table-view" style="margin-top: 25px;">
				<li class="mui-table-view-cell">
					<a style="text-align: center;color: #FF3B30;">
						退出登录
					</a>
				</li>
			</ul>
			</div>

			</div>
		</div>
		
		<script src="./js/mui.min.js"></script>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			var slider = document.getElementById("slider");
			mui('.mui-input-group').on('change', 'input', function() {
				if (this.checked) {
					switch (this.value) {
						case 'static':
							document.getElementById("img1").className = "";
							document.getElementById("slider").classList.add("mui-hidden");
							break;
						case 'slider':
							document.getElementById("img1").className = "mui-hidden";
							if(slider.classList.contains("mui-hidden")){
								document.getElementById("slider").classList.remove("mui-hidden");
							}
							break;
					}
				}
			});
			
		</script>
		<script type="text/javascript">
			var btn=document.getElementById('btn');
			var swiperContain=document.getElementById('swipercontain');
			var both=document.getElementById('both');
			btn.onclick=function(){
				swiperContain.style.display="none";
				both.style.display="block";
			};
		</script>
	<script>
	    var swiper = new Swiper('.swiper-container',{
	        	effect : 'coverflow',
	        });
    </script>
</body>
</html>